<template>
	<view class="el">
		<view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" :indicator-dots="indicatorDots"
						 :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
							<swiper-item v-for="img in list.imgs">
								<view class="swiper-item uni-bg-red">
									<image :src="img.url"></image>
								</view>
							</swiper-item>

						</swiper>
					</view>
				</view>
			</view>




			<view class="actInfo">
				<view class="">{{list.actName}}</view>
				<view class="price">￥ ： {{list.price}}</view>
			</view>

			<view class="actInfo1">
				<view class="">剩余数量 ： {{list.number}}</view>
				<view class="numbers">
					<text>购买数量 : </text>
					<uni-number-box :min="1" :value="number" :max="list.number" class="number" @change="changeNumber"></uni-number-box>
				</view>
			</view>
			<view class="actInfo2">
				<view class="">活动详情</view>
				<hr>
				<view class="info">
					{{list.introduce}}
					<image v-if="!list.introduce" src="/static/details/20200603172557.png"></image>
					<text v-if="!list.introduce">暂时没有详情介绍</text>
				</view>
			</view>





			<view class="shopping">
				<view class="shopping1" @click="goCall">
					<text class="icon">&#xec2a;联系客服</text>
				</view>
				<view class="shopping2" @click="goCollection">
					<text id="collection" class="icon">&#xec0a;111</text>
				</view>
				<view class="shopping3" @click="addSoppingCar">
					<text>加入购物车</text>
				</view>
				<view class="shopping4" @tap="goPay">
					<text>立即购买</text>
				</view>
			</view>
		</view>





		<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				actId: '',
				list: '',
				number: 1,
				user: {}
			}
		},
		onLoad(options) {
			this.actId = options.actId;
			this.selectActivity();

		},
		mounted() {

		},
		methods: {

			async goPay() {
				var _this = this;
				var activeList = {
					img: this.list.imgs[0].url,
					number: this.number,
					price: this.list.price,
					actName: this.list.actName,
					actId: this.list.actId,
					campId: this.list.campId,
					userId:uni.getStorageSync('user').userId
				}

				uni.request({
					url: _this.webUrl + "activity/addActiveOrder",
					method: 'POST',
					data:activeList,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
					},
					dataType: 'json',
					success(res) {
						console.log(res.data.obj);
						activeList.activityOrderId = res.data.obj;
						uni.setStorage({
							key: 'activeList',
							data: activeList,
							success(res2) {
								uni.navigateTo({
									url: "activePlayer"
								});
							}
						})
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: "服务器错误"
						})
					}
				});
			},

			//联系客服
			goCall() {
				console.log("..........................");
				uni.makePhoneCall({
					phoneNumbe: '17783027893',
					success() {
						console.log("成功")
					},
					fail() {
						console.log("失败")
					}
				});
			},
			selectActivity() {
				var _this = this;
				uni.request({
					url: _this.webUrl + "activity/selectActivity",
					data: {
						actId: _this.actId
					},
					method: 'GET',
					success(res) {
						_this.list = res.data.obj;
					}
				})
			},
			changeNumber(number) {
				this.number = number;
			}
		},


		onReachBottom() { //监听上拉触底事件
			console.log('onReachBottom');
			this.showLoadMore = true;
		},
		onPullDownRefresh() { //监听下拉刷新动作
			console.log('onPullDownRefresh');
			// 这里获取数据
			setTimeout(function() {
				//初始化数据
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1000);
		},

		computed: {

		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'iconfont1';
		src: url('/static/details/fonts/taobao_global.ttf')
	}

	.test {
		font-family: iconfont1;
	}

	.el {
		background-color: #55557f;
	}

	.swiper {
		width: 750rpx;
		height: 400rpx;

		image {
			width: 100%;
			height: 400rpx;
		}
	}

	.actInfo {
		margin-top: 5px;
		width: 100%;
		background-color: #eeeeee;

		view {
			text-align: right;
		}

		.price {
			color: #ffaa00;
		}
	}

	.actInfo1 {
		margin-top: 5px;
		width: 100%;
		background-color: #eeeeee;

		view {
			padding: 25rpx;
		}

		.numbers {

			display: flex;


			// justify-content: center;
		}

	}

	.number {
		margin-top: -25rpx;
	}


	.actInfo2 {
		margin-top: 5px;
		width: 100%;
		height: 200px;
		background-color: #eeeeee;

		view {
			padding: 25rpx;
		}

		.info {
			color: #005500;
			font-size: 14px;
			display: flex;

			flex-direction: column;
			align-items: center;

			image {
				width: 70%;
				height: 100px;
			}
		}
	}

	.shopping {
		position: fixed;
		width: 100%;
		height: 90rpx;
		background-color: rgb(240, 240, 240);
		bottom: 0rpx;

		.shopping1 {
			float: left;
			width: 25%;
			height: 100%;
			line-height: 90rpx;
			text-align: center;

			text {
				font-size: 27rpx;
			}
		}

		.shopping2 {
			float: left;
			width: 25%;
			height: 100%;
			line-height: 90rpx;
			text-align: center;

			text {
				font-size: 27rpx;
			}

			visibility:hidden;
		}

		.shopping3 {
			float: left;
			width: 25%;
			height: 100%;
			line-height: 90rpx;
			text-align: center;
			background-color: rgb(148, 102, 102);
			color: white;

			text {
				font-size: 27rpx;
			}

			visibility:hidden;
		}

		.shopping4 {
			float: left;
			width: 25%;
			height: 100%;
			line-height: 90rpx;
			text-align: center;
			background-color: rgb(148, 102, 102);
			color: white;

			text {
				font-size: 27rpx;
			}
		}
	}
</style>
